<!--
 * @Description: 打印
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-13 19:20:06
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/print/index.vue
-->
<template>
  <el-drawer
    size="60%"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
  >
    <div id="printContent">
      <div style="display: flex; align-items: center">
        <div style="flex: 1">
          <table width="100%" border="1" cellpadding="8" cellspacing="0">
            <tr align="left">
              <td colspan="1" style="background: #babab8">客户名</td>
              <td colspan="1">王姗姗-21--上样单片帘</td>
              <td colspan="3" style="background: #babab8">交单日期</td>
              <td colspan="3">2023-07-06/限期发</td>
            </tr>
            <tr align="left">
              <td colspan="1" style="background: #babab8">手机号</td>
              <td colspan="1">15197246666</td>
              <td colspan="3" style="background: #babab8">销售单号</td>
              <td colspan="3">146181</td>
            </tr>
            <tr align="left">
              <td colspan="1" style="background: #babab8">品牌</td>
              <td colspan="1">有点牛</td>
              <td colspan="1" style="background: #babab8">下单人</td>
              <td colspan="1">熊遥远</td>
              <td colspan="1" style="background: #babab8">快递</td>
              <td colspan="1">百世物流/到付</td>
            </tr>
            <tr>
              <td colspan="1" style="background: #babab8">地址</td>
              <td colspan="7">
                任她姗,15197246666,湖南省湘潭市湘乡市热兴家居城典推布艺
              </td>
            </tr>
            <tr>
              <td colspan="1" style="background: #babab8">备注</td>
              <td colspan="7">这是备注</td>
            </tr>
          </table>
        </div>
        <div>
          <div style="transform: rotate(90deg)">
            <div style="height: 80px; width: 140px">
              <img
                style="height: 100%; width: 100%"
                src=""
                alt=""
              />
            </div>
            <div style="text-align: center; line-height: 40px">123</div>
          </div>
        </div>
      </div>
      <div>
        <h2>定制窗帘</h2>
        <table
          width="100%"
          class="mt10 table-top"
          border="1"
          cellpadding="8"
          cellspacing="0"
          align="center"
        >
          <tr>
            <td>1</td>
            <td>默认</td>
            <td>
              主布: DM013-3，宽1*高2.68，韩折(定型)，分片|倍率: 右单开2，方向:
              定宽，布绑: 无,复杂加工:单色|单色，备注: 按照8个折做
            </td>
            <td>余料无</td>
          </tr>
          <tr>
            <td>1</td>
            <td>默认</td>
            <td>
              主布: DM013-3，宽1*高2.68，韩折(定型)，分片|倍率: 右单开2，方向:
              定宽，布绑: 无,复杂加工:单色|单色，备注: 按照8个折做
            </td>
            <td>余料无</td>
          </tr>
          <tr>
            <td>1</td>
            <td>默认</td>
            <td>
              主布: DM013-3，宽1*高2.68，韩折(定型)，分片|倍率: 右单开2，方向:
              定宽，布绑: 无,复杂加工:单色|单色，备注: 按照8个折做
            </td>
            <td>余料无</td>
          </tr>
          <tr>
            <td>1</td>
            <td>默认</td>
            <td>
              主布: DM013-3，宽1*高2.68，韩折(定型)，分片|倍率: 右单开2，方向:
              定宽，布绑: 无,复杂加工:单色|单色，备注: 按照8个折做
            </td>
            <td>余料无</td>
          </tr>
          <tr>
            <td>1</td>
            <td>默认</td>
            <td>
              主布: DM013-3，宽1*高2.68，韩折(定型)，分片|倍率: 右单开2，方向:
              定宽，布绑: 无,复杂加工:单色|单色，备注: 按照8个折做
            </td>
            <td>余料无</td>
          </tr>
        </table>
      </div>

      <!-- <table
        width="100%"
        class="mt10 table-top"
        border="1"
        cellpadding="8"
        cellspacing="0"
        align="center"
      >
        <tr>
          <th>类型</th>
          <th>位置</th>
          <th>产品名称</th>
          <th>米数</th>
          <th>幅数</th>
          <th>宽</th>
          <th>高</th>
          <th>数量</th>
          <th>做法</th>
          <th>备注</th>
        </tr>
        <tr align="center" v-for="(row, index) in data.list" :key="index">
          <td>{{ row.part2 === "1" ? "辅料" : "面料" }}</td>
          <td>
            <template v-if="row.part2 === '0'">
              {{
                getTypeName(types.md_complex_machining_model_part_1, row.part)
              }}
            </template>
            <template v-else-if="row.part2 === '1'">
              {{
                getTypeName(types.md_complex_machining_model_part_2, row.part)
              }}
            </template>
            <template v-else-if="row.part2 === '-1'">主布</template>
          </td>
          <td>{{ row.name }}</td>
          <td>{{ row.number }}</td>
          <td>{{ row.amplitude }}</td>
          <td>{{ row.width }}</td>
          <td>{{ row.height }}</td>
          <td>{{ row.count }}</td>
          <td>
            {{
              row.direction === "0"
                ? "定宽"
                : row.direction === "1"
                ? "定高"
                : ""
            }}
          </td>
          <td>{{ row.remark }}</td>
        </tr>
      </table> -->
    </div>
  </el-drawer>
</template>

<script>
import printJS from "print-js";

export default {
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
    types: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    setTimeout(() => {
      this.printHtml();
    }, 60);
  },
  methods: {
    printHtml() {
      const style =
        "@page { margin: 10px } @media print { .header-view { width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-left {width: 60%;} .img-view { display: flex; align-items: center; }.img-view-img { height: 80px; } .img-view-img img { height: 100%; } .img-view-mods { margin-left: 10px; } .header-right { display: flex; align-items: center;} .header-right-img { width: 80px; height: 80px; margin-left: 10px; } .header-right-img img { width: 100%; height: 100%; } .table-top {margin-top: 10px} table, td, th { text-align: center; border: 1.5px solid #000; border-collapse: collapse;}}";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          this.shows = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.header-view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    width: 60%;
  }
  .img-view {
    display: flex;
    align-items: center;
    &-img {
      height: 80px;
      img {
        height: 100%;
      }
    }
    &-mods {
      margin-left: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    &-img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
table,
td,
th {
  text-align: center;
  border: 1.5px solid #000;
  border-collapse: collapse;
}
</style>
